<script setup lang='ts'>
import { useGetDictTag, useTagAdd, useTagDel, useUpdateTag } from '@fl/api/man-api/jc-dict'
import { SearchForm, SearchTable } from '@fl/components'
import ButtonItem from '@fl/components/button-item.vue'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { statusMap, tagBtns } from './constant'

const route = useRoute()
const { push } = useRouter()
const { createMessage } = useMessage()

const showDiglog = ref(false)

// const searchState = {
//     dictName: '',
//     dictLabel: '',
//     status: '',
// }
// const state = ref<any>(cloneDeep(searchState))

// 新增编辑表单字段
const formState = {
    dictLabel: '',
    dictSort: 1,
    dictType: '',
    dictValue: '',
    remark: '',
    status: '0',
}
const form = ref<any>(cloneDeep(formState))

const gridOptions = reactive<any>({
    columns: [
        { field: 'dictCode', title: '字典编码' },
        { field: 'dictLabel', title: '字典标签' },
        { field: 'dictValue', title: '字典键值' },
        { field: 'dictSort', title: '字典排序' },
        { slots: { default: 'status' }, title: '状态' },
        { field: 'remark', title: '备注' },
        { field: 'createTime', title: '创建时间' },
        { slots: { default: 'operate' }, title: '操作', width: 200 },
    ],
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

const params = computed(() => {
    return route.query.dictType
})

// 查询内容列表
const { data, isLoading, refetch } = useGetDictTag(params)

// 列表查询条件
// const searchCol = [
//     {
//         colProps: {
//             span: 8,
//         },
//         label: '字典名称',
//         prop: 'dictName',
//     },
//     {
//         colProps: {
//             span: 8,
//         },
//         label: '字典标签',
//         prop: 'dictLabel',
//     },
//     {
//         colProps: {
//             span: 8,
//         },
//         label: '状态',
//         options: statusMap,
//         prop: 'status',
//         valueType: 'select',
//     },
// ]

// 新增编辑表单配置
const formCol: any = [
    {
        fieldProps: {
            maxlength: 20,
        },
        label: '字典标签',
        prop: 'dictLabel',
    },
    {
        fieldProps: {
            maxlength: 20,
        },
        label: '字典键值',
        prop: 'dictValue',
    },
    {
        fieldProps: {
            disabled: true,
        },
        label: '字典类型',
        prop: 'dictType',
    },
    {
        fieldProps: { min: 1, precision: 0 },
        label: '字典排序',
        prop: 'dictSort',
        valueType: 'input-number',
    },
    {
        label: '状态',
        options: statusMap,
        prop: 'status',
        valueType: 'radio',
    },
    {
        label: '备注',
        prop: 'remark',
    },
]

const rules = {
    dictLabel: [{ message: '请输入字典标签', required: true, trigger: 'blur' }],
    dictSort: [{ message: '请输入字典排序', required: true, trigger: 'blur' }],
    dictValue: [{ message: '请输入字典键值', required: true, trigger: 'blur' }],
}

// function getData(val: any) {
//     state.value = {
//         ...val,
//     }

//     refetch()
// }

// function reset() {
//     state.value = cloneDeep(searchState)

//     refetch()
// }

// 删除标签
const { mutate } = useTagDel()
function doAction(item: any, row: any) {
    switch (item.value) {
        case 'edit':
            form.value = {
                ...row,
            }
            showDiglog.value = true
            break
        case 'delete':
            mutate(row.dictCode, {
                onSuccess: () => {
                    refetch()
                    createMessage.success('操作成功')
                },
            })
            break
        default:
            break
    }
}

function doAdd() {
    form.value = cloneDeep(formState)

    form.value.dictType = params.value

    showDiglog.value = true
}

// 富文本内容 新增 编辑保存接口
const { mutate: mutateAdd } = useTagAdd()
const { mutate: mutateEdit } = useUpdateTag()
function doSave() {
    if (form.value?.dictCode) {
        mutateEdit(form.value, {
            onSuccess: () => {
                refetch()
                showDiglog.value = false
                createMessage.success('操作成功')
            },
        })
    }
    else {
        mutateAdd(form.value, {
            onSuccess: () => {
                refetch()
                showDiglog.value = false
                createMessage.success('操作成功')
            },
        })
    }
}
</script>

<template>
    <ElCard shadow="never">
        <div class="mb-20 cursor-pointer"
             @click="() => push('/operations-pages/system-setting/dicts')"
        >
            <div i-radix-icons:double-arrow-left
                 class="text-red size-16"
            />
            返回
        </div>

        <!-- <SearchForm v-bind="state" :columns="searchCol" submit-text="查询" class="mb-20" @submit="getData"
            @reset="reset" /> -->

        <SearchTable v-loading="isLoading"
                     v-bind="gridOptions"
                     :data="data"
        >
            <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="doAdd"
                >
                    新增
                </ElButton>
            </template>

            <template #status="{ row }">
                <span class="px-10 py-2 rounded-20 c-#fff"
                      :class="{ 'bg-#1ab394': row?.status === '0', 'bg-#acb3b1': row?.status === '1' }"
                >
                    {{ statusMap.find((v) => v.value === row.status)?.label ?? row.status }}
                </span>
            </template>

            <template #operate="{ row }">
                <ButtonItem :btns="tagBtns"
                            @btn-click="doAction($event, row)"
                />
            </template>
        </SearchTable>
    </ElCard>

    <!-- 字典新增编辑弹框 -->
    <PlusDialogForm v-model:visible="showDiglog"
                    v-model="form"
                    :title="form?.dictCode ? '编辑' : '新增'"
                    :form="{ columns: formCol, rules, labelWidth: 100 }"
                    @confirm="doSave"
    />
</template>

<style lang="scss" scoped></style>
